﻿@page "{currentPage?}"
@using Nongzhsh.JobHub
@using Nongzhsh.JobHub.JobHub
@using Nongzhsh.JobHub.Pages.JobHub
@using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Modal
@inherits Nongzhsh.JobHub.Pages.JobHubPageBase
@model IndexModel

@{
    ViewBag.PageTitle = "JobHub";
}
@section scripts {
    <abp-script-bundle name="@typeof(IndexModel).FullName">
        <abp-script src="/Pages/JobHub/index.js" />
    </abp-script-bundle>
}
@section styles {
    <abp-style-bundle name="@typeof(IndexModel).FullName">
        <abp-style src="/Pages/JobHub/index.css" />
    </abp-style-bundle>
}

<abp-row>
    <div class="col-md-auto text-center">
        <h2>JobHub</h2>
        <abp-button button-type="Warning" data-toggle="modal" data-target="#clearCacheModal" type="button" text="@L["ClearCache"].Value" />
    </div>
    <abp-column>
        <form method="post" id="SearchForm">
            <abp-row>
                <abp-column>
                    <abp-input asp-for="@Model.Search.Keyword" />
                </abp-column>
                <abp-column>
                    <abp-input asp-for="@Model.Search.City" />
                </abp-column>
                <abp-column size="_3">
                    <label>@L["Actions"].Value</label><br>
                    <abp-button button-type="Primary" type="submit" text="@L["Search"].Value" busy-text="@L["Search"].Value ..." />
                </abp-column>
            </abp-row>
            <abp-row>
                <div class="col-md-auto">
                    <abp-radio asp-for="@Model.Search.JobSource"
                               asp-items="@EnumHelper.ToSelectListItems(typeof(JobSource), Model.Search.JobSource)" inline="true" />
                </div>
                <div class="col-md-auto">
                    @if(Model.Jobs.Items.Any())
                    {
                        <b>@Model.Search.Keyword @Model.Search.City </b>
                        <span>@L["SearchResultTotalCount"].Value:</span>
                        <b>@Model.Jobs.TotalCount</b>
                    }
                </div>
            </abp-row>
        </form>
    </abp-column>
</abp-row>

<form asp-page-handler="ClearCache">
    <input type="hidden" name="cacheKey" value="@Model.Jobs.CacheKey" />
    <abp-modal id="clearCacheModal">
        <abp-modal-header title="@L["ClearCache"].Value"></abp-modal-header>
        <abp-modal-body>
            @L["AreYouSure"].Value
        </abp-modal-body>
        <abp-modal-footer buttons="@(AbpModalButtons.Cancel|AbpModalButtons.Save)"></abp-modal-footer>
    </abp-modal>
</form>
<hr>
<abp-row>
    <abp-column>
        @if(Model.Jobs.Items.Any())
        {
            foreach(var job in Model.Jobs.Items)
            {
                <div class="jobItem text-muted">
                    <abp-row>
                        <abp-column>
                            <h5 class="mb-1">
                                <a href="@job.Url" target="_blank">@job.Position</a>
                                <span class="badge badge-warning">@job.Salary</span>
                            </h5>
                            <span>@job.Education</span>&nbsp;<span>@job.WorkingYears</span>
                        </abp-column>
                        <abp-column>
                            <h5>@job.Company</h5>
                            <cite>@job.Address</cite>
                        </abp-column>
                        <abp-column size="_2">
                            <time title="@job.PublishedTime">
                                @ConvertDatetimeToTimeAgo(job.PublishedTime)
                            </time><br>
                        </abp-column>
                    </abp-row>
                </div>
                <hr>
            }
            <my-paginator model="@Model.PagerModel" show-info="false" route-values="@Model.Search.ToDictionary<string>()" />
        }
        else
        {
            <div class="alert alert-warning" role="alert">
                <h4 class="alert-heading">@L["NoResult"].Value</h4>
                <p>@L["NoResultDescription"].Value</p>
            </div>
        }
    </abp-column>
</abp-row>
<hr>
<abp-button id="topBtn" title="Go to top">Top</abp-button>
